/** 
 * 学习目标：使用Ref获取组件实例对象

 * */
import React from "react";

export default class App extends React.Component {
    // 1. 调用`React.createRef()`方法创建一个 ref 对象，用于关联模板中的某个元素，在模板渲染完毕后可以通过 ref 对象访问到模板中的元素。
    ChildRef = React.createRef()
    render() {
        return (
            < >
                {/* 2. 将创建好的ref对象添加到文本框中 */}
                {/* <input type="text" ref={this.txtRef} /> */}
                <button onClick={this.handleClick}>点击获取DOM元素</button>
                <Child ref={this.ChildRef}></Child>
            </ >
        );
    }
    // 3.通过 ref 对象获取文本框的值
    handleClick = () => {
        // 通过this.txtRef.current 获取DOM对象
        // console.log(this.txtRef.current.value)
        this.ChildRef.current.handle()
    }
    // anfn 快速生成箭头函数
}

class Child extends React.Component {
    handle = () => {
        // 通过this.txtRef.current 获取DOM对象
        alert('子组件的函数被调用')
    }
    render() {
        return (
            <div>
                <button>只组件</button>
            </div>
        )
    }
}